<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>NSK中国质量管理系统</title>

		<!-- 自定义样式，根据实际需求使用 -->
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<script src="../js/html5shiv.min.js"></script>
		<script src="../js/respond.min.js"></script>

		<style>
			body{
				margin:0px;
				background: url('../img/bag.jpeg') no-repeat;
				background-size:100% 100%;
				background-attachment:fixed;
			}
			.container {
				margin-top:200px;
				width: 100%;
				/* background: url('http://image.maidiyun.com/Templet/Comp/Default/1383/index_banner_0x0.jpg') no-repeat; */
			}
			.bag{
				float: right;
				width: 75%;
				height: 291px;
			}
			.login-form{
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 10px;
				padding-bottom: 10px;
				width: 25%;
				background-color: aliceblue;
				float: right;
				min-height: 291px;
				max-height: 291px;
			}
	        .login-box {
	            width: 86%;
	            margin-left:8%;
	            margin-top: 50px;
	        }
	 
	        .login-box h2 {
	            font-size: 26px;
	            text-align: center;
	            margin-bottom: 25px;
	        }
	 
	        .login-item {
	            margin-bottom: 20px;
	        }
			
			/* 适配小屏幕 */
			@media screen and (max-height:600px) {
				#login-title{
					font-size: 19px;
				}
			}
			
			@media screen and (max-width:1200px) {
				#login-title{
					font-size: 19px;
				}
			}
    </style>
	</head>

	<body>
		<div class="container" id="container">
			<div class="login-form">
				<form class="login-box" action="" method="post" onsubmit="return false;">
					<h2 id="login-title" style="color: red;">NSK中国质量管理系统</h2>
					<div class="login-item">
						<label for="inputUsername" class="sr-only">用户名</label>
						<input type="text" id="inputUsername" class="form-control" placeholder="用户名" required="" autofocus="">
					</div>
					<div class="login-item">
						<label for="inputPassword" class="sr-only">密码</label>
						<input type="password" id="inputPassword" class="form-control" placeholder="密码" required="">
					</div>
					<button class="btn btn-lg btn-primary btn-block" type="submit" id="submitBtn">登录</button>
				</form>
			</div>
			<div class="bag">
				<img src="../img/index_banner_0x0.jpg" width="100%" height="100%" >
			</div>
			<div style="clear: both;"></div>
		</div>
		<!-- 由于是内嵌在工程中，可以直接使用fineui -->
		<script src="../js/fineui.min.js">
		</script>
		<script>
			//判断当前会话的登录入口
			var loginSource = localStorage.loginPage;
			if(loginSource){
				delete localStorage.loginPage;
				window.location.href = loginSource;
			}
			document.getElementById("submitBtn").addEventListener("click", function() {
				doSubmit();
			});
			var serverURL = ""

			function doSubmit() {
				//记录登录界面
				localStorage.loginPage = "/java-script-edu/nskLogin/nskLogin/login.html";
				// window.location.href = response.originUrl;
				window.location.href = "../main.html"
				return;
				
				//------------------------
				var username = document.getElementById("inputUsername").value.trim();
				var password = document.getElementById("inputPassword").value.trim();
				if (username === "") {
					window.alert("请输入用户名");
					return false;
				}
				if (password === "") {
					window.alert("请输入密码");
					return false;
				}
				/**
				 * 通过登录接口发送post请求，携带用户名密码等信息
				 */
				$.ajax({
					url: serverURL+"/webroot/decision/login",
					contentType: "application/json",
					type: "POST",
					dataType: "json",
					data: JSON.stringify({
						username: username,
						password: password,
						validity: -1,
						origin: getUrlQuery("origin")
					}),
					success: function(res) {
						// 登录成功后保存是否保持登录状态以及token
						if (res.data) {
							var data = res.data;
							var day = data.validity === -2 ? (14 * 24) : -1;
							BI.Cache.addCookie("fine_remember_login", data.validity, "/", day);
							BI.Cache.addCookie("fine_auth_token", data.accessToken, "/", day);

							// 然后跳转到相应的页面
							var response = data.originUrlResponse;
							if (BI.toUpperCase(response.method) === "GET") {
								localStorage.loginPage = "/java-script-edu/nskLogin/login.html";
								window.location.href = response.originUrl;
							} else {
								doActionByForm(response.originUrl, response.parameters, {
									method: response.method
								});
							}
						} else {
							// 提示错误信息
							alert(res.errorMsg);
						}
					},
					error: function() {
						alert("超时或服务器其他错误");
					}
				});
			}

			// 查询url参数
			function getUrlQuery(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r !== null) return r[2];
				return "";
			}

			// 通过form表单跳转
			function doActionByForm(url, data, options) {
				options = options || {};
				var config = {
					method: options.method,
					url: url,
					data: data,
					target: options.target
				};
				var $form = $("<form method=\"" + config.method + "\" />");
				$form.attr("action", config.url);
				$form.attr("method", config.method || "post");
				$form.attr("target", config.target || "_self");
				for (var key in config.data) {
					$form.append("<input type=\"hidden\" name=\"" + key + "\" value=\"" + config.data[key] + "\" />");
				}
				$(document.body).append($form);
				$form[0].submit();
				$form.destroy();
			}
			
			//检测刘篮球窗口变化
			window.onresize=function(){
				console.log("浏览器可是范围发生变化，重新计算登录框上边距...")
				let loginFormMarginTop = document.body.clientHeight*0.25;
				document.getElementById("container").style.marginTop = loginFormMarginTop+"px";
			}
		</script>
	</body>

</html>
